<template>
  <div class="main-contianer">
    <div class="d-d dia-div" v-dragSwitch="true">
      <div class="d-d_container dia-container" style="">
        <div class="d-d_container_header dia-header">
          <svg-icon class="move-icon"  class-name="move-icon" icon-class="move"></svg-icon>
        </div>
        <el-button class="d-d-button" type="primary" style="margin-top: 2px;" @click="isSurface=true;isVideo=false;surOpcity=1">模型</el-button>
        <el-button class="d-d-button" type="primary" @click="isSurface=false;isVideo=true;videoOpcity=1">监控</el-button>
        <el-button class="d-d-button" type="primary" @click="mergeAll()">混合</el-button>
      </div>
    </div>
    <div class="left-top ">
      <div class="body-container">
        <leftTop ref="leftTop" :radarRealData="radarRealData" :minZ="minZ" :chooseIndex="chooseRealIndex"></leftTop>
      </div>
    </div>
    <div class="left-bottom">
      <div class="body-container">
        <leftBottom ref="leftBottom" :radarRealData="radarRealData" :chooseIndex="chooseRealIndex"></leftBottom>
      </div>
    </div>
    <!-- <div class="d-d surface-div" v-dragSwitch="true">
      <div class="d-d_container surface-container" style="">
        <div class="d-d_container_header surface-header" style="height: 10px;">
        </div>
      </div>
    </div> -->
    <div class="surface-img"  @contextmenu.prevent :style="{'left':'calc(25% + '+position.x+'px)','top':position.y+'px'}">
      <div ref="surfaceChart" class="surface-chart" v-show="isSurface" :style="{'opacity':surOpcity}" ></div>
      <img src="../assets/images/video-img.png" @mousedown="startDrag" class="video-class" v-show="isVideo" :style="{'opacity':videoOpcity}" />
    </div>
    <div class="right-container">
      <el-select v-model="stockId" placeholder="请选择料仓模型">
        <el-option
            v-for="item in siloWithConfList"
            :key="item.siloStockId"
            :label="item.siloStockName"
            :value="item.siloStockId">
        </el-option>
      </el-select>
      <el-button class="right-button right-button2" size="small" style="background-color: #67c23a;border-color: #67c23a;" type="primary" @click="radarMeasure()">立即测量</el-button>
      <el-button class="right-button" size="small" type="default">数据刷新</el-button>
      <el-button class="right-button" size="small" type="primary">方形分割</el-button>
      <el-button class="right-button" size="small" type="primary">圆形操作</el-button>
      <el-button class="right-button" size="small" type="primary">点云处理</el-button>
      <el-button class="right-button right-button2" size="small" style="background-color: #67c23a;border-color: #67c23a;" type="primary">一键盘点</el-button>
      <el-button class="right-button" size="small" style="" type="primary">立即上传</el-button>
    </div>
    <div class="switch-container">
      <div class="button-container">
        <el-switch
            v-model="zCloseOpen"
            active-color="rgb(255, 73, 73)"
            inactive-color="rgb(19, 206, 102)"
            >
        </el-switch>
        <el-tag size="medium" type="warning" effect="light">z轴开关</el-tag>
      </div>
      <div class="button-container">
        <!-- <el-switch
            v-model="mainView"
            active-color="rgb(255, 73, 73)"
            inactive-color="rgb(19, 206, 102)">
        </el-switch> -->
        <div class="view-button"  @click="changeView(0,0)"></div>
        <el-tag size="medium" type="warning" effect="light"> 主视图</el-tag>
        <!-- <el-button class="bottom-button" size="small" type="primary" @click="changeView(0,0)">主视图</el-button> -->
      </div>
      <div class="button-container">
        <div class="view-button"  @click="changeView(0,-90)"></div>
        <el-tag size="medium" type="warning" effect="light"> 侧视图</el-tag>
      </div>
      <div class="button-container">
        <div class="view-button"  @click="changeView(90,0)"></div>
        <el-tag size="medium" type="warning" effect="light"> 俯视图</el-tag>
      </div>
    </div>
  </div>
</template>

<script>

import * as echarts from "echarts";
import 'echarts-gl';
import moment from "moment";
import "@/utils/diyVueDirectives";

import initModelMethod from '@/views/radarSilo/initModel/initModelMethod';
import {selectSiloList} from '@/api/radar/radarSilo';
import { getRealData } from "@/api/radar/radarReal";  
import { startRadar } from "@/api/caol/startRadar";  

import leftTop from "./radarSilo/firstPage/leftTop.vue";
import leftBottom from "./radarSilo/firstPage/leftBottom.vue";

export default {
  components: { 
    leftTop,
    leftBottom
   },
  data(){
    return{
      stockId:undefined,
      siloWithConfList:undefined,
      chooseIndex:undefined,
      chooseRealIndex:undefined,
      series:[],
      legend:[],
      changeMaxMins:false,
      realMaxMins:undefined,
      minZ:0,
      option:undefined,
      surfaceChart:undefined,  //曲面
      radarRealData:undefined, //实时数据 料位 质量等
      realInterval:undefined,  
      surfaceIndex:undefined,
      zCloseOpen:false,
      mainView:false,
      sideView:false,
      downView:false,
      isSurface:true,
      isVideo:false,
      surOpcity:1,
      videoOpcity:1,
      position:{x:0,y:10},
      clickFlag : false,
      offset: { x: 0, y: 0 },
    }
  },
  watch: {
    stockId:{
      // deep:true,
      handler(newValue){
        // this.isSurface = true;
        // this.isVideo = false;
        // this.surOpcity = 1;
        // this.videoOpcity = 1;
        sessionStorage.setItem("stockId",this.stockId);
        this.initSiloModel();
      }
    },
    zCloseOpen:{
      handler(newValue){
        
        if(newValue){
          this.option.zAxis3D.nameTextStyle.color = 'rgba(255,255,255,1)';
          this.option.zAxis3D.axisLine.lineStyle.color = 'rgba(255,255,255,1)';
          this.option.zAxis3D.axisLabel.textStyle.color = 'rgba(255,255,255,1)';
          
          this.surfaceChart.setOption({zAxis3D:this.option.zAxis3D});
        }else{
          this.option.zAxis3D.nameTextStyle.color = 'rgba(255,255,255,0)';
          this.option.zAxis3D.axisLine.lineStyle.color = 'rgba(255,255,255,0)';
          this.option.zAxis3D.axisLabel.textStyle.color = 'rgba(255,255,255,0)';
          
          this.surfaceChart.setOption({zAxis3D:this.option.zAxis3D});
        }
      }
    }
  },
  mounted(){
    this.initData();

    window.onresize = () => {
      return (() => {
        setTimeout(()=>{
          this.surfaceChartResize();
          this.$refs.leftTop.heightChartResize();
          this.$refs.leftBottom.historyChartResize();
        },200)
      })()
    }
  },
  beforeDestroy(){
    if(this.surfaceChart){
      this.surfaceChart.dispose();
      this.surfaceChart = null;
    } 
    if(this.realInterval){
      clearInterval(this.realInterval)
    }
  },
  methods:{
//物位 曲线    平均，高位，低位
//体积质量曲线
// openMenu(event){
//   event.preventDefault();
// },
    initData(){
      selectSiloList({type:'1'}).then(res=>{
        this.siloWithConfList = res.data.siloData
        // console.log(this.siloWithConfList)
        if(!this.stockId)this.stockId = this.siloWithConfList[0].siloStockId;
      })
    },
    realMethods(){
      // this.initSurface(); //获取曲面数据
      this.initData();    //获取料仓数据
      this.getRealData();  //获取实时数据
    },
    initSiloModel(){
      // siloConfName siloInitId siloParam;
      // console.log(this.stockId)
      this.chooseIndex = this.siloWithConfList.findIndex((item) => item.siloStockId == this.stockId);
      if(this.chooseIndex == -1){
        this.$modal.msgError("该料仓未建立")
        return
      }
      var siloConf = this.siloWithConfList[this.chooseIndex];
      if(siloConf.siloInitId){
        var object = initModelMethod.initConfModel(siloConf);
        this.realMaxMins = this.changeMaxMins?object.realMaxMins:object.maxMins;
        console.log("?????????",object)
        this.series = object.series;
        this.legend = object.legend;
        this.minZ = Number(object.minZ);
        this.maxZ = Number(object.maxZ);
        //这里添加一个interval,实时数据和实时曲面同时获取
      }else{
        this.realMaxMins = [];
        this.series = [];
        this.legend = [];
      }
      this.realMethods();
      // this.realInterval = setInterval(()=>{
      //   this.realMethods();
      // },20000)
    },

    initSurface(){
      // getSurface({stockId:this.stockId}).then(res=>{

      // })
      var index = this.radarRealData.findIndex((item) => item.stockId == this.stockId);
      var surfaceData = JSON.parse(this.radarRealData[index].siloSurface)
      // var min = 0;
      // var max = 0;
      // var sum = 0;
      // var num = 0;
      // var lev = 0;
      // surfaceData.forEach(item => {
      //   min = min < item[2]?min : item[2];
      //   max = max > item[2]?max : item[2];
      //   sum += item[2];
      //   num+=1;
      // });
      // console.log('min',min)
      // console.log('max',max)
      // console.log('lev',sum/num)
      // console.log('square',100*100*(sum/num))
      this.legend.push('曲面');
      this.series.push({
        name:'曲面',
        type: 'surface',
        data: surfaceData,
        wireframe: {
          show: false
        },
        silent: true,
      })
      this.surfaceIndex = this.series.length - 1;
      var height = Number(this.siloWithConfList[this.chooseIndex].viewHeight)+this.minZ;

      var stockName = this.siloWithConfList[this.chooseIndex].siloStockName;
      // console.log(",,,",height)
      // console.log("????????",Number(this.siloWithConfList[this.chooseIndex].siloHeight))
      // console.log("????????",this.maxZ)
      // console.log("????????",this.minZ)
      // console.log("????????",-(((Number(this.siloWithConfList[this.chooseIndex].siloHeight)/(this.maxZ-this.minZ)) - 1)*5 + 20))
      var center = [0,-(((Number(this.siloWithConfList[this.chooseIndex].siloHeight)/(this.maxZ-this.minZ)) - 1)*5 + 20),0];
      // var center = [0,-20,0];
      if(this.surfaceChart){
        this.editMax();
        // this.series[this.surfaceIndex].data = surfaceData;
        // if(this.stockId = '5'){
        //   console.log("??????????????????")
        //   this.option.visualMap[1].min = 0;
        //   this.option.visualMap[1].max = 19;
        // }else{
          this.option.visualMap[1].min = this.radarRealData[index].linerMin;
          this.option.visualMap[1].max = this.radarRealData[index].linerMax;
        // }

        this.option.visualMap[1].seriesIndex = this.surfaceIndex;
        this.option.zAxis3D.max = height;
        this.option.series = this.series;
        this.option.grid3D.viewControl.center = center;
        this.option.title.text = stockName;
      }else{
        this.option = {
          title:{
            text: stockName,
            left: 'center',
            textStyle:{
              color:'#fff'
            }
          },
          tooltip: {
            show:false,
          },
          legend:{
            // right:'1%',
            top:'30',
            data:this.legend,
            textStyle:{
              color:'#fff'
            }
          },
          grid3D:{
            viewControl:{
              center:center
            }
            // boxHeight:'50',
            // bottom:'40%'
          },
          animation: false,
          visualMap:[ {
            show: false,
            inRange: {
              color: [
                'rgba(255,255,255,0.2)'
              ]
            }
          },{
            seriesIndex:this.surfaceIndex,
            show: false,
            min: this.radarRealData[index].linerMin,
            max: this.radarRealData[index].linerMax,
            inRange: {
              color: [
                  'rgb(0,0,205)',
                  'rgb(72,209,204)',
                  'rgb(0,255,127)',
                  'rgb(255,255,0)',
                  'rgb(255,0,0)'
                ]
            }
          }],
          xAxis3D: {
            // axisPointer: { show: false }
            min:this.realMaxMins[0],
            max:this.realMaxMins[1],
            nameTextStyle:{
              color:'#fff'
            },
            axisLine:{
              lineStyle:{
                color:'#fff'
              },
            },
            axisLabel:{
              textStyle:{
                color:'#fff'
              }
            },
            splitLine:{
              show:false
            }

          },
          yAxis3D: {
            // axisPointer: { show: false }
            min:this.realMaxMins[2],
            max:this.realMaxMins[3],
            nameTextStyle:{
              color:'#fff'
            },
            axisLine:{
              lineStyle:{
                color:'#fff'
              },
            },
            axisLabel:{
              textStyle:{
                color:'#fff'
              }
            },
            splitLine:{
              show:false
            }
            
          },
          zAxis3D: {
            
            max: height,
            nameTextStyle:{
              // color:'#fff',
              color:'rgba(0,0,0,0)',
            },
            axisLine:{
              // show:false,
              lineStyle:{
                show:false,
                // color:'#fff',
                color:'rgba(255,255,255,0)',
              },
            },
            axisLabel:{
              show:true,
              textStyle:{
                color:'rgba(255,255,255,0)'
              }
            },
            splitLine:{
              show:false
            }
            // axisPointer: { show: false }
          },
          series: this.series,
        };
        this.surfaceChart = echarts.init(this.$refs.surfaceChart);
      }
      this.surfaceChart.setOption(this.option,true);
      this.watchView();
      this.moveModel();
    }, 
    editMax(){
      this.option.xAxis3D.min = this.realMaxMins[0];
      this.option.xAxis3D.max = this.realMaxMins[1];
      this.option.yAxis3D.min = this.realMaxMins[2];
      this.option.yAxis3D.max = this.realMaxMins[3];
    },
    watchView(){
      var that = this;
      this.surfaceChart.getZr().on('globalout', function (params) {
        // console.log("?？？？？？？？",params)
        let grid3DModel = that.surfaceChart.getModel().getComponent('grid3D');
        if (grid3DModel) {
          // console.log("?????",grid3DModel)
            let viewControl = grid3DModel.coordinateSystem.model.option.viewControl;
            // console.log("?????",viewControl)
            // console.log('Current View Angle:', viewControl.getAlpha(), viewControl.getBeta(), viewControl.getZoom());
        }
      })
      // this.surfaceChart.getOption().
    },
    // startDrag(){

    // },
    moveModel(){
      var that = this; 
      this.surfaceChart.getZr().on('mousedown', function (params) {
        that.startDrag(params.event);
      });
    },

    startDrag(event){
      this.clickFlag = true;
      this.offset.x = event.clientX - this.position.x;
      this.offset.y = event.clientY - this.position.y;
      document.addEventListener('mousemove', this.doDrag);
      document.addEventListener('mouseup', this.stopDrag);
    },
    doDrag(event){
      if(this.clickFlag && event.which == 3){
        this.position.x = event.clientX - this.offset.x;
        this.position.y = event.clientY - this.offset.y;
      }
    }, 
    stopDrag(){
      this.clickFlag = false
      document.removeEventListener('mousemove', this.doDrag);
      document.removeEventListener('mouseup', this.stopDrag);
    },
    changeView(x,y){
      // this.option.grid3D.viewControl.
      this.option.grid3D =  {
            viewControl: {
                alpha: x,
                beta: y,
                // distance: 250,
                // zoom: 1.5
            }
        }
      this.surfaceChart.setOption({grid3D:this.option.grid3D});
    },
    surfaceChartResize(){
      if(this.surfaceChart) {
        this.surfaceChart.resize()
      }
    },
    getRealData(){
      getRealData({}).then(res=>{
        this.radarRealData = res.data;
        this.chooseRealIndex = this.radarRealData.findIndex((item) => item.stockId == this.stockId); 
        this.initSurface();

      });
    },
    radarMeasure(){
      var timeCur = Date.parse(new Date());
      startRadar({coalYardId:this.stockId,uuid:timeCur}).then(res=>{
      });
    },
    mergeAll(){
      this.isSurface=true;
      this.isVideo=true;
      this.surOpcity = 0.8;
      this.videoOpcity = 0.6;
    }

  }



}
</script>

<style lang="scss" scoped>
.main-contianer{
  position: absolute;
  width: 100%;
  height: 100%;
}
.left-top{
  position: absolute;
  top: 10px;
  left: 10px;
  width: calc(25% - 5px);
  height: 40%;
  z-index:1;
}
.left-bottom{
  position: absolute;
  top: 40%;
  left: 10px;
  width: calc(25% - 5px);
  height: 30%;
  z-index:1;
}
.boder-container{
  border: 1px solid #034c6a;
  box-shadow: 0px 0 55px rgba(255,255,255,.1) inset;
}
.surface-div{
  // position: absolute;
  position: absolute;
  z-index: 10;

  left: 25%;
  top: 0px;
  // z-index: 1;
  // border:1px solid;
  // box-sizing: border-box;
  .surface-container{
    width: calc(75% - 300px);
    height: calc(100% - 0px);
    position: fixed;
    .surface-header{
      // width: 100%;
      height: calc(100% - 10px);
      margin-top: 10px;
      border-bottom: 1px solid #dcdfe6;
    }
  }
}
.surface-img{
  position: absolute;
  // z-index: 10;
  width: calc(75% - 300px);
  height: calc(100% - 10px);
  left: 25%;
  top: 10px;
}
.surface-chart{
  position: absolute;
  width: 100%;
  height:100%;
  z-index: 2;
}

.right-container{
  position: absolute;
  top:10px;
  right:40px;
  height: 350px;
  width:200px;
  z-index: 1;
}
.button-container{
  text-align: center;
  width: 80px;
}
.right-button{
  margin-top:10px;
  width:100px;
  float: right;
  font-size: 14px;
}
.right-button2:hover{
  background: #85ce61 !important;
  border-color: #85ce61 !important;
}
.el-button--success {
  color: #fff;
  background-color: #0084c5;
  border-color: #086df0;
}
.el-button--primary:focus, .el-button--primary:hover {
  background: #65a5f9;
  border-color: #65a5f9;
  color: #fff;
}

.switch-container{
  width: 400px;
  position: absolute;
  bottom: 50px;
  right: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 3;
}
.el-tag--medium {
    height: 28px;
    line-height: 26px;
}
.el-tag--warning {
    background-color: rgba(230, 162, 60, .1);
    border-color: rgba(230, 162, 60, .2);
    color: #e6a23c;
}
.bottom-button{
  // margin-top:10px;
  // width:100px;
  // float: right;
  // font-size: 14px;
  text-align: center;
  background-color: #001890ff;
}
.view-button{
  width: 40px;
  height: 20px;
  background-color: rgb(255, 73, 73);
  border-radius: 20px;
  margin-left: 20px;
  cursor: pointer;
}
.dia-div{
    
    
    width: auto;
    height: auto;
    position: absolute;
    z-index: 10;
    right: 320px;
    top: 10px;

    .dia-container{
    
    
      width: 70px;
      // height: 100px;
      position: fixed;
      border: 1px solid #27acf5e8;
      background-color: rgba(26, 99, 168, 1);
      user-select: none;


      .dia-header {
    
        height:38px;
        text-align: center;
        border-bottom: 1px solid #dcdfe6;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .d-d-button{
    margin-top:10px;
    width:50px;
    // float: right;
    margin-left:9px;
    font-size: 14px;
    background-color: #1890ff;
    border-color: #1890ff;
    color:#fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .move-icon{
    width:25px;
    height:25px;
  }

  .video-class{
    position: absolute;
    // width: calc(75% - 300px);
    // height: calc(100% - 10px);
    // left: 25%;
    // // margin-top: 10px;
    // top: 0px;
    z-index:0;
    width:100%;
    height:100%;
  }

</style>